<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
  <style>
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @-webkit-keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }

    @keyframes flipInY {
      from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }

      60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
      }

      80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      }

      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
    }

    .flipInY {
      -webkit-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: flipInY;
      animation-name: flipInY;
    }
    @-webkit-keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
      }
    }

    @keyframes rotateOut {
      from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
      }

      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
      }
    }

    .rotateOut {
      -webkit-animation-name: rotateOut;
      animation-name: rotateOut;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="news = 'guonei'">国内新闻</button>
    <button @click="news = 'guoji'">国际新闻</button>
    <div>
      <transition
        mode="out-in"
        enter-active-class="animated flipInY"
        leave-active-class="animated rotateOut"
      >
        <component :is="news"></component>
      </transition>
    </div>
  </div>
  <script>

    const guonei = {
      template: '<h3>cctv国内新闻</h3>'
    }
    const guoji = {
      template: '<h3>international news</h3>'
    }
   
    const app = new Vue({
      el: '#app',
      data: {
        news: 'guoji'
      },
      components: {
        guonei,
        guoji
      }
    })
  </script>
</body>
</html>
